<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
    <meta name="wap-font-scale" content="no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="format-detection" content="telephone=no, email=no"/>
    <meta http-equiv="Cache-Control" content="no-cache" />
    <title></title>
    <link rel="stylesheet" href="css/neat.css"/>
    <link rel="stylesheet" href="css/swiper.min.css"/>
    <link rel="stylesheet" href="css/style.css"/>
    <style>
        html, body {
            width: 100%;
            height: 100%;
        }
    </style>
    <script>
        (function (doc, win) {
            var docEl = doc.documentElement,
                    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                    recalc = function () {
                        var clientWidth = docEl.clientWidth;
                        if (!clientWidth) return;
                        docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
                    };
            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvt, recalc, false);
            doc.addEventListener('DOMContentLoaded', recalc, false);
        })(document, window);
    </script>
</head>
<body style="overflow:hidden;">
    <div class="top-search"><input type="text" class="input" placeholder="Search by name"/></div>
    <div class="wrapper1">
        <ul class="sorts-list">
            <li>Shoes</li>
            <li>Bags</li>
            <li>T-Shirts</li>
            <li>Blazers</li>
            <li>Jumpers</li>
            <li>Sunglasses</li>
            <li>Shorts</li>
        </ul>
        <div class="wrapper-icons clearfix">
            <ul>
                <li>
                    <div><img src="img/person.png" alt="" class="person"/></div>
                </li>
                <li>
                    <div><img src="img/bag.png" alt="" class="shopping-bag"/><span class="bag-num">3</span></div>
                </li>
                <li>
                    <div><img src="img/exit.png" alt="" class="exit"/></div>
                </li>
            </ul>
        </div>
    </div>
    <div class="wrapper2">
        <header class="index-header">
            <div><i class="icon-menu"></i></div>
            <div><img src="img/logo.png" alt="" class="logo"/></div>
            <div class="other-icon">
                <p>
                    <i class="icon-bag"></i>
                    <!--<span class="bag-num">3</span>-->
                </p>
                <p><i class="icon-zoom"></i></p>
            </div>
        </header>
        <section class="con product-con" style="bottom:2rem;height:calc(100% - 4.4rem);">
            <div class="swiper-container product-banner">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><img src="img/goods07.png" alt=""/></div>
                    <div class="swiper-slide"><img src="img/goods07.png" alt=""/></div>
                    <div class="swiper-slide"><img src="img/goods07.png" alt=""/></div>
                    <div class="swiper-slide"><img src="img/goods07.png" alt=""/></div>
                </div>
                <!-- Add Pagination -->
                <div class="swiper-pagination"></div>
            </div>
            <div class="product-info clearfix">
                <div class="pi-brand">ASOS</div>
                <h5 class="pi-title">Backpack With Crocodile</h5>
                <div class="price">
                    <div class="pi-price">$42.36</div>
                    <div class="sale-action">
                        <img src="img/sale.png" alt="" class="event-icon"/>
                        <del>$130</del>
                    </div>
                </div>
            </div>
            <div class="product-info-filter product-size">
                <span>XS</span>
                <span class="active">S</span>
                <span>M</span>
                <span>L</span>
                <span>XL</span>
                <span>XXL</span>
            </div>
            <div class="product-info-filter product-color">
                <span class="color-white"></span>
                <span class="color-blue active"></span>
                <span class="color-yellow"></span>
                <span class="color-black"></span>
            </div>
            <div class="product-info-filter product-action">
                <div class="clearfix">
                    <div class="product-num clearfix">
                        <span class="plus">+</span>
                        <div class="num-div">1</div>
                        <span class="minus">-</span>
                    </div>
                    <button class="btn btn-blue add-cart">Add to Cart</button>
                </div>
                <button class="btn btn-ghost-blue">Save</button>
                <div class="product-hits">
                    <div class="hits clearfix">
                        <div class="stars">
                            <img src="img/star-yellow.png" alt=""/>
                            <img src="img/star-yellow.png" alt=""/>
                            <img src="img/star-yellow.png" alt=""/>
                            <img src="img/star-gray.png" alt=""/>
                            <img src="img/star-gray.png" alt=""/>
                        </div>
                        <span class="hits-total">23 reviews</span>
                    </div>
                    <div class="share">
                        <img src="img/share.png" alt=""/>
                        <span>Share</span>
                    </div>
                </div>
            </div>
            <div class="product-details">
                <div class="product-details-tab">
                    <span class="active">PRODUCT</span>
                    <span>BRAND</span>
                    <span>REVIEWS(4)</span>
                    <span>FEATURES</span>
                </div>
                <div class="product-details-tab-con product-product"  style="display: block;">   <!-- PRODUCT -->
                    <p>For ages, nature has provided the medical industry with ingredients that have powerful antibiotic, antiseptic, or anti-inflammatory properties which are processed into medicines, serums, ointments, or lotions. often cost no more than their synthetic opponents.</p>
                </div>
                <div class="product-details-tab-con product-brand">   <!-- BRAND -->
                    <p>brand content</p>
                </div>
                <div class="product-details-tab-con product-reviews">   <!-- REVIEWS -->
                    <ul>
                        <li>
                            <div class="comment-info clearfix">
                                <span>Leonard Perez</span>
                                <div class="stars">
                                    <img src="img/star-yellow.png" alt=""/>
                                    <img src="img/star-yellow.png" alt=""/>
                                    <img src="img/star-yellow.png" alt=""/>
                                    <img src="img/star-gray.png" alt=""/>
                                    <img src="img/star-gray.png" alt=""/>
                                </div>
                            </div>
                            <p class="comment-details">
                                Have you ever examined the ingredients listed on the labels of your cosmetics or other skin care products? Do you know what those ingredients are?
                            </p>
                            <div class="comment-date">01 Jan 2016</div>
                        </li>
                        <li>
                            <div class="comment-info clearfix">
                                <span>Leonard Perez</span>
                                <div class="stars">
                                    <img src="img/star-yellow.png" alt=""/>
                                    <img src="img/star-yellow.png" alt=""/>
                                    <img src="img/star-yellow.png" alt=""/>
                                    <img src="img/star-gray.png" alt=""/>
                                    <img src="img/star-gray.png" alt=""/>
                                </div>
                            </div>
                            <p class="comment-details">
                                Have you ever examined the ingredients listed on the labels of your cosmetics or other skin care products? Do you know what those ingredients are?
                            </p>
                            <div class="comment-date">01 Jan 2016</div>
                        </li>
                        <li>
                            <div class="comment-info clearfix">
                                <span>Leonard Perez</span>
                                <div class="stars">
                                    <img src="img/star-yellow.png" alt=""/>
                                    <img src="img/star-yellow.png" alt=""/>
                                    <img src="img/star-yellow.png" alt=""/>
                                    <img src="img/star-gray.png" alt=""/>
                                    <img src="img/star-gray.png" alt=""/>
                                </div>
                            </div>
                            <p class="comment-details">
                                Have you ever examined the ingredients listed on the labels of your cosmetics or other skin care products? Do you know what those ingredients are?
                            </p>
                            <div class="comment-date">01 Jan 2016</div>
                        </li>
                    </ul>
                </div>
                <div class="product-details-tab-con product-features">   <!-- FEATURES -->
                    <table>
                        <tr>
                            <td>Material</td>
                            <td>100% Cotton</td>
                        </tr>
                        <tr>
                            <td>Handle</td>
                            <td>Grab handle</td>
                        </tr>
                        <tr>
                            <td>Straps</td>
                            <td>Adjustable straps</td>
                        </tr>
                        <tr>
                            <td>Back</td>
                            <td>Padded back</td>
                        </tr>
                        <tr>
                            <td>Pocket</td>
                            <td>External pocket</td>
                        </tr>
                    </table>
                </div>
            </div>
        </section>
        <footer class="product-footer clearfix">
            <div class="favorite"><img src="img/star-gray.png" alt=""/></div>
            <input type="text" class="input review-input" placeholder="Write review"/>
            <div class="send-comment"><img src="img/send.png" alt=""/></div>
        </footer>
    </div>

    <script src="js/zepto.js"></script>
    <script src="js/touch.js"></script>
    <script src="js/swiper.min.js"></script>
    <script src="js/public.js"></script>
    <script src="js/goto.js"></script>
</body>
</html>